<template>
  <div>
    <li v-for="(message,index) in messages" :key="message.id">
      <router-link :to="`/home/message/detail/${message.id}`">{{message.msg}}</router-link>
    </li>
    <hr>
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'Message',
  components: {},
  props: {},
  data() {
    return {
      messages: []
    }
  },
  mounted() {
    setTimeout(()=>{
      const message = [{
        msg: 'mes01',
        id: '1'
      },{
        msg: 'mes02',
        id: '2'
      },{
        msg: 'mes03',
        id: '3'
      },{
        msg: 'mes04',
        id: '4'
      }]
      this.messages = message
    },1000)
  }
}
</script>

<style scoped>

</style>
